<template>
  <div>
    <div class="share-top" v-show="isshow">
      <div class="wechat-friends">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-weixin"></use>
        </svg>
        <p>微信好友</p>
      </div>
      <div class="wechat-circle">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-pengyouquan"></use>
        </svg>
        <p>朋友圈</p>
      </div>
      <div class="wechat-link">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-lianjie1"></use>
        </svg>
        <p>复制链接</p>
      </div>
      <div class="wechat-house">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-shoucang1"></use>
        </svg>
        <p>已收藏</p>
      </div>
    </div>
    <div class="share-content">
      <div class="wechat-follow">
        <i class="iconfont icon-aixin"></i>
        <p>关注</p>
      </div>
      <div class="wechat-tip">
        <i class="iconfont icon-jubao"></i>
        <p>举报</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'share',
  data () {
    return {
      isshow: {
        type: Boolean,
        default: false
      }
    }
  }
}
</script>

<style scoped>
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }

  .share-top {
    width: 100%;
    border-bottom: 1px #efefef solid;
    display: flex;
    padding: 3% 0;
  }

  .share-top > div {
    width: 25%;
    text-align: center;
  }

  .share-top > div > i {
    width: 100%;
    font-size: 26px;
  }

  .share-top > div > svg {
    width: 28px;
    height: 28px;
  }

  .share-content {
    width: 100%;
    border-bottom: 1px #efefef solid;
    display: flex;
    padding: 3% 0;
  }

  .share-content > div {
    width: 25%;
    text-align: center;
  }

  .share-content > div > i {
    width: 100%;
    font-size: 26px;
  }

  .share-footer {
    width: 100%;
    background-color: #fff;
    text-align: center;
    padding-top: 2%;
    font-size: 16px;
    color: #333;
  }

  .share-footer > a {
    color: #333;
    display: block;
  }
</style>
